<template>
  <view class="map-container">
    <!-- 地图显示区域 -->
    <view class="map-wrapper">
      <scroll-view scroll-x scroll-y class="map-scroll" :show-scrollbar="false">
        <view class="map-content">
          <image src="/static/map.png" class="campus-map" mode="widthFix" />
          <!-- 地图标记点 -->
          <view class="map-markers">
            <view class="marker" :style="{ left: marker.left, top: marker.top }" v-for="(marker, index) in markers" :key="index" @click="showMarkerInfo(marker)">
              <image src="/static/location.png" class="marker-icon" />
              <text class="marker-label">{{ marker.name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 地点列表 -->
    <view class="location-list">
      <text class="list-title">常用地点</text>
      <view class="location-item" v-for="(location, index) in locations" :key="index" @click="locateOnMap(location)">
        <text class="location-name">{{ location.name }}</text>
        <image src="/static/arrow-right-gray.png" class="arrow-icon" />
      </view>
    </view>

    <!-- 底部导航 -->
    <CustomBottomNav />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import CustomBottomNav from '../../common/tabar.vue';
import { usePublicStore } from '../../../store/public';

// 搜索关键词
const searchKeyword = ref('');
// 地图标记点数据
const markers = ref([
  { name: '教学楼A座', left: '35%', top: '25%', type: 'teaching' },
  { name: '教学楼B座', left: '45%', top: '30%', type: 'teaching' },
  { name: '学生宿舍5公寓', left: '60%', top: '50%', type: 'dormitory' },
  { name: '食堂', left: '40%', top: '60%', type: 'canteen' },
  { name: '图书馆', left: '25%', top: '40%', type: 'library' },
  { name: '行政楼', left: '30%', top: '30%', type: 'administration' }
]);

// 常用地点列表
const locations = ref([
  { name: '教学楼A座', left: '35%', top: '25%' },
  { name: '教学楼B座', left: '45%', top: '30%' },
  { name: '学生宿舍5公寓', left: '60%', top: '50%' },
  { name: '食堂', left: '40%', top: '60%' },
  { name: '图书馆', left: '25%', top: '40%' },
  { name: '行政楼', left: '30%', top: '30%' }
]);

// 返回上一页
const navigateBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 搜索地点
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    const found = locations.value.find(loc => loc.name.includes(searchKeyword.value.trim()));
    if (found) {
      locateOnMap(found);
    } else {
      uni.showToast({
        title: '未找到该地点',
        icon: 'none'
      });
    }
  }
};

// 在地图上定位地点
const locateOnMap = (location) => {
  // 这里可以添加地图滚动到指定位置的动画
  uni.showToast({
    title: `定位到${location.name}`,
    icon: 'success'
  });
};

// 显示标记点信息
const showMarkerInfo = (marker) => {
  uni.showModal({
    title: marker.name,
    content: `类型: ${getTypeText(marker.type)}`,
    showCancel: false
  });
};

// 获取地点类型文本
const getTypeText = (type) => {
  const typeMap = {
    teaching: '教学楼',
    dormitory: '宿舍',
    canteen: '食堂',
    library: '图书馆',
    administration: '行政楼'
  };
  return typeMap[type] || '其他';
};

// 页面加载时设置当前选中的底部导航项
onMounted(() => {
  const publicStore = usePublicStore();
  publicStore.setCurrentTab(0);
});
</script>

<style scoped>

/* 地图容器样式 */
.map-container {
  background-color: #f5f5f5;
  min-height: 1200rpx;
  padding: 10rpx 10rpx 240rpx 10rpx;
}

.map-wrapper {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.map-scroll {
  width: 100%;
  height: 500rpx;
}

.map-content {
  position: relative;
  width: 100%;
}

.campus-map {
  width: 100%;
}

/* 地图标记点样式 */
.map-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
}

.marker-icon {
  width: 40rpx;
  height: 40rpx;
}

.marker-label {
  font-size: 24rpx;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  margin-top: 8rpx;
}

/* 地点列表样式 */
.location-list {
  background: #fff;
  margin: 0 20rpx 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.list-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
}

.location-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 10rpx;
  border-bottom: 1px solid #f5f5f5;
}

.location-item:last-child {
  border-bottom: none;
}

.location-name {
  font-size: 28rpx;
  color: #333;
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
  color: #999;
}
</style>